<!--
 * @Description: 
 * @Autor: codeBo
 * @Date: 2025-05-13 15:07:52
 * @LastEditors: lihaibo@shanshu.ai
 * @LastEditTime: 2025-05-20 10:06:35
-->
<script setup>
import { useModal } from 'vue-modal-provider'
import useDeviceFlowStore from '../pinia.ts'
import DeviceFlowList from '@/commn/deviceFlowList/index.vue'
import flow1 from '@/assets/imgs/flow-one.png'
import flow2 from '@/assets/imgs/flow-two.png'
import flow3 from '@/assets/imgs/flow-three.png'
import flow4 from '@/assets/imgs/flow-four.png'
import flow5 from '@/assets/imgs/flow-five.png'
import flow6 from '@/assets/imgs/flow-six.png'
import flow7 from '@/assets/imgs/flow-seven.png'

const iconMap = {
  one: flow1,
  two: flow2,
  three: flow3,
  four: flow4,
  five: flow5,
  six: flow6,
  seven: flow7
}
const { show: myDeviceFlowList } = useModal(DeviceFlowList)
const flowStore = useDeviceFlowStore()
const isEdit = computed(() => flowStore.isEdit)
const props = defineProps(['node'])

const clickNode = () => {
  if (isEdit.value) {
    return
  }
  // 打开下一个弹窗，关闭当前弹窗
  flowStore.modelRef?.close()
  myDeviceFlowList({
    caseId: flowStore.caseId,
    deviceCode: props.node.data.deviceCode
  })
}
</script>

<template>
  <div :class="{ 'not-edit': !isEdit }" class="default-node" @click="clickNode">
    <div>
      <h4>{{ node.data.deviceName }}</h4>
      <p>装置代码：{{ node.data.deviceCode }}</p>
      <p>产&nbsp;&nbsp;出&nbsp;&nbsp;量：{{ node.data.outputValue }}</p>
    </div>
    <div>
      <img :src="iconMap[node.data.icon]" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.default-node {
  padding: 0 8px 0 18px;
  width: 306px;
  height: 120px;
  border: 1px #d7dbe6 solid;
  border-radius: 8px;
  background-color: #fff;
  color: #0c1635;
  display: flex;
  position: relative;

  > div:first-child {
    z-index: 2;
    > p {
      margin-bottom: 8px;
      font-size: 14px;
    }
    > h4 {
      font-family: Microsoft YaHei;
      font-weight: 600;
      font-size: 16px;
      line-height: 24px;
      letter-spacing: 0px;
      color: #0c1635;
      margin: 16px 0;
    }
  }
  > div:last-child {
    z-index: 1;
    position: absolute;
    right: 8px;
    top: 0px;
  }
}
.dark-theme {
  color: #333;
}
.not-edit {
  cursor: pointer;
}
</style>
